<template>
	<view class="wrap">
		<cu-custom bgColor="bg-gradual-them" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{pageName}}</block>
		</cu-custom>

		<u-notice-bar mode="horizontal" type="primary" :list="listBar"></u-notice-bar>



		<!-- 用户上传的日常资料 -->

		<view class="cu-list menu-avatar comment solids-top cat-menu" v-for="(item, id) in allLifes" :key="id"
			v-show="item.catId !== 0">
			<view class="cu-item">

				<!-- 用户头像 -->
				<image :src="item.avatar" mode="aspectFill" class="cu-avatar cat-head"></image>

				<!-- 用户姓名 -->
				<view class="content">
					<view class="text-grey">{{item.nickname}}</view>
					<view class="text-gray text-content text-df">
						{{item.catText}}
					</view>

					<!-- 图片 -->
					<view class="text-sm" style="background-color: #fcfcfc;margin-top: 10rpx;">
						<view class="flex">
							<view style="padding-left: 10rpx;"
								v-show="item.catImg1 != '' && item.catImg1 != null && item.catImg1 != undefined">
								<u-image @click="clickImg(item.catImg1)" :src="item.catImg1" :lazy-load="true"
									shape="square" width="160rpx" height="160rpx" :fade="true" duration="450"
									mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg2 != '' && item.catImg2 != null && item.catImg2 != undefined">
								<u-image @click="clickImg(item.catImg2)" :src="item.catImg2" :lazy-load="true"
									shape="square" width="160rpx" height="160rpx" :fade="true" duration="450"
									mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>

							<view style="padding-left: 10rpx;"
								v-show="item.catImg3 != '' && item.catImg3 != null && item.catImg3 != undefined">
								<u-image @click="clickImg(item.catImg3)" :src="item.catImg3" :lazy-load="true"
									shape="square" width="160rpx" height="160rpx" :fade="true" duration="450"
									mode="aspectFill">
									<view slot="error" style="font-size: 15rpx;">加载失败</view>
								</u-image>
							</view>
						</view>
					</view>
					<view class="margin-top-sm flex justify-between">
						<view class="text-gray text-df cuIcon-time">{{' '}}{{item.createTime}}</view>
						<view>


							<!-- 0为没有点赞 -->
							<view class="demo-dislike" v-show="item.remark === 0" @click="userLiks(id)">
								<u-icon name="heart" color="#bdbeba" size="30"></u-icon>
								{{' '}}{{item.catLikes}}
							</view>


							<!-- 1为 点赞 -->
							<view class="demo-like" v-show="item.remark === 1">
								<u-icon name="heart-fill" color="#fa3534" size="30"></u-icon>
								{{' '}}{{item.catLikes}}
							</view>

						</view>
					</view>
					<view style="margin-top: 3rpx;">
						<view class="cu-tag bg-green light round my-text" v-show="item.catCheck == '已通过'">
							{{item.catCheck}}
						</view>

						<view class="cu-tag bg-orange light round my-text" v-show="item.catCheck == '审核中'">
							{{item.catCheck}}
						</view>

						<view class="cu-tag bg-red light round my-text" v-show="item.catCheck == '需修改'">
							{{item.catCheck}}
						</view>

						<view class="cu-tag bg-blue light round my-text" v-show="item.catChoice == '已通过'">
							已精选
						</view>

					</view>
				</view>
			</view>
		</view>

		<view class="cu-card dynamic" v-show="show">




			<u-toast ref="uToast" />
		</view>

		<view style="height: 50rpx;"></view>



	</view>
</template>


<script>
	import {
		getToken
	} from '@/utils/auth';
	import imgData from "@/common/uiImg.js";
	export default {
		data() {
			return {
				pageName: '我的分享',
				listBar: [
					'猫猫小程序交流群：133808502'
				],
				list: null,
				form: {},
				show: false,

				allLifes: [{
						// openid:

						catId: 0, // 猫咪id

						avatar: 'https://img-blog.csdnimg.cn/3d43fe923d074f42bed49242265da5be.jpg', //分享人 头像

						nickname: '热心猫友',

						catText: '今日喂猫分享，大白好可爱！', // 分享日常

						catImg1: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片
						catImg2: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片
						catImg3: 'https://img-blog.csdnimg.cn/20210826141951774.jpg', // 照片

						createTime: '2022年11月5日', // 日期

						catLikes: 70, // 喜欢数

						remark: 0, // 获取数据的时候需要判断

						dailyId: 0,

						catCheck: "",

						catChoice: "",

					},

				],

				pageNum: 0, // 页码
				pageSize: 5, // 查多少

				openid: '', // openid

				isBottom: 0,

				flag: 1, // 判断用户是否有记录


			}
		},
		onLoad(option) {
			this.getOpenid() // 获取用户openid

			this.getUserDaily() // 通过openid 分页查询用户上传的 记录
		},

		onReachBottom() {

			if (this.isBottom === 0) {
				console.log('执行刷新')
				this.getUserDaily()
			} else {
				console.log('到底了，不刷新')
				//提示发送 到底了，不刷新
				this.$refs.uToast.show({
					title: '已经到底啦！喵~',
					type: 'warning',
					url: ''
				})
			}
		},

		methods: {

			// 获取用户openid
			getOpenid() {
				let openid = getToken();
				if (openid) {
					this.openid = openid
				}
			},


			//获取 用户上传的信息 
			getUserDaily() {
				if (this.flag === 0) {
					//提示发送 没有记录！
					this.$refs.uToast.show({
						title: '未查到您上传的图鉴',
						type: 'error',
						url: ''
					})
				}

				// 1、装填信息
				let form = {}
				form.pageNum = this.pageNum
				form.pageSize = this.pageSize
				form.openid = this.openid

				//发送请求
				// this.request('getUserDaily', form, 'POST').then(res => {
				this.$u.api.getUserDaily(form).then(res => {
					console.log("用户查询:", res)

					// 说明 没有记录！
					if (res.data.length === 0) {
						this.flag = 0
						//提示发送 没有记录！
						this.$refs.uToast.show({
							title: '未查到您上传的图鉴',
							type: 'error',
							url: ''
						})
						return
					}

					if (res.data.length < this.pageSize) {
						this.isBottom = 1 // 到底了
						console.log("到底了----")
						//提示发送 到底了，不刷新
						this.$refs.uToast.show({
							title: '已经到底啦！喵~',
							type: 'warning',
							url: ''
						})

					}
					// 页数+1
					this.pageNum++

					// TODO 数据填充
					this.allLifes = [...this.allLifes, ...res.data.map(item => {

						// id
						item.dailyId = item.id

						// 图片加工
						if (item.catImg1 != "") {
							item.catImg1 = this.myimgurl() + item.catImg1
						}
						if (item.catImg2 != "") {
							item.catImg2 = this.myimgurl() + item.catImg2
						}
						if (item.catImg3 != "") {
							item.catImg3 = this.myimgurl() + item.catImg3
						}

						// 时间加工
						item.createTime = item.createTime.split(" ")
						item.createTime = item.createTime[0]
						item.createTime = item.createTime.split("-")
						item.createTime = item.createTime[0] + "年" + item.createTime[1] + "月" + item
							.createTime[2] + "日"

						// 点赞判断
						if (item.remark == "已点赞") {
							item.remark = 1
						} else {
							item.remark = 0
						}
						return item

					})]

				})

			},

			// 修改 图鉴
			myUpdate() {
				this.$refs.uToast.show({
					title: '功能还未开放',
					type: 'warning',
					url: ''
				})
			},


		}
	}
</script>


<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>
<style lang="scss" scoped>
	/* 内容布局 start*/
	.cat-menu {
		background-color: rgba(255, 255, 255, 1);
		width: 90%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 15rpx !important;
		margin: auto;
		margin-top: 35rpx;
	}
	


	.cat-head {
		border-radius: 50%;
		width: 70rpx;
		height: 70rpx;
	}

	.center-box {
		color: #333333;
		width: 700rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 20rpx;
		padding: 0rpx 30rpx 0rpx;
		position: relative;
		margin-top: 20rpx;
	}


	.bxBox {
		position: relative;
		display: flex;
		/* padding: 0 30rpx; */
		min-height: 100rpx;
		/* background-color: #ffffff; */
		/* justify-content: space-between; */
		align-items: center;
		font-size: 30rpx;
		line-height: 1.6em;
		flex: 1;

		.bxImg {
			display: inline-block;
			margin-right: 10rpx;
			width: 1.6em;
			text-align: center;
		}
	}

	.my-text {
		font-size: 20rpx;
	}

	.my-name {
		font-size: 30rpx;
	}
</style>
